<template>
    <el-form-item label="语音" :prop="props.upInfo.prop">
        <el-upload
            action=""
            list-type="text"
            :accept="props.upInfo.acceptFile"
            :limit="1"
            :auto-upload="false"
            :on-exceed="handleExceed"
            :before-upload="beforeUpdata"
            :on-change="handleChange"
            :file-list="uploadFileList"
            :on-remove="Remove"
            :class="{ hide: hideUpload }">
            <template #default>
                <el-button type="primary">上传文件</el-button>
            </template>
            <template #tip>
                <div class="el-upload__tip">
                    <span>格式支持.mp3,.wav,.m4a,.MP3,.WAV,.M4A文件大小不超过2M，音频时长不超过60s。</span>
                </div>
            </template>
        </el-upload>
    </el-form-item>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
import { ElMessage } from 'element-plus';
import type { UploadFile } from 'element-plus/es/components/upload/src/upload';
import { uploadFile2 } from '@/api/common';
import { playTime, IsNotEmpty } from '@/utils/utils';
import bus from '@/utils/bus';
import { endLoading, startLoading } from '@/utils/request';
const emit = defineEmits(['submit']);

const uploadFileList = ref([]);
const props = defineProps<{
    upInfo: {
        type: number; //文件类型
        label: string; //文件名称
        prop: string; // 是否是必传
        files: any; //文件
        multiple: {
            //是否支持多选
            type: boolean;
            default: false;
        };
        limitSize: number; // 最大文件上传限制
        limitNum: {
            // 上最大传数量
            type: number;
            default: 1;
        };
        acceptFile: string; // 上传类型文件判断
    };
}>();
// const { prop, files, acceptFile, limitNum } = props.upInfo;
const hideUpload = computed(() => {
    return uploadFileList.value.length >= 1;
});
const beforeUpdata = async (file: any) => {
    const is2M = file.size / 1024 / 1024 <= 2;
    const ext = file.name.substring(file.name.lastIndexOf('.'));
    if (props.upInfo.acceptFile.indexOf(ext) == -1) {
        ElMessage.warning(`只能上传.mp3,.wav,.m4a,.MP3,.WAV,.M4A格式`);
        handleRemove(file);
        return;
    }
    const res = await playTime(file, 'audio');
    if (res > 60) {
        ElMessage.warning('语音最大上传时间是60s');
        handleRemove(file);
        return;
    }
    if (!is2M) {
        ElMessage.warning(`上传的音频最大支持2M`);
        handleRemove(file);
        return;
    }
    return is2M && res <= 60;
};
const handleRemove = (file: UploadFile) => {
    uploadFileList.value = uploadFileList.value.filter((item: any) => item.url != file.url);
    emit('submit', uploadFileList.value);
};
const Remove = (file: UploadFile, list: UploadFile[]) => {
    uploadFileList.value = list;
    emit('submit', list);
    bus.emit('empty');
};
// 上传文件
const uploadImg = async (file: any) => {
    file = file.raw;
    const flag = await beforeUpdata(file);
    if (!flag) return;
    startLoading();
    return await uploadFile2(
        {
            file,
            fileName: file.name
        },
        null,
        true
    );
};
// 长传改变
const handleChange = async (file: UploadFile, list: UploadFile[]) => {
    const existFile = list.slice(0, list.length - 1).find(f => f.name === file.name);
    if (existFile) {
        ElMessage.error('当前文件已经存在!');
        list.pop();
        return;
    }
    try {
        const data: any = await uploadImg(file);
        if (IsNotEmpty(data)) {
            uploadFileList.value.push(data);
            emit('submit', uploadFileList.value);
        }
        endLoading();
    } catch (error) {
        endLoading();
    }
};
const handleExceed = (file: UploadFile, list: UploadFile[]) => {
    ElMessage.warning(
        `当前限制选择 1 个文件，本次选择了 ${props.upInfo.files.length} 个文件，共选择了 ${
            props.upInfo.files.length + list.length
        } 个文件`
    );
    Remove(file, list);
};
// 图片数据回显
const echo = (data: any) => {
    uploadFileList.value.push({ name: data.media_file.name, url: data.media_file.url });
    return;
};
// 清空数据回显
const empty = () => {
    uploadFileList.value = [];
};
// 主动暴露方法
defineExpose({ empty, echo });
</script>
<style lang="scss" scoped>
.pre_img_box {
    overflow: hidden;

    .pre_image {
        display: block;
        margin: auto;
        max-height: 400px;
    }
}
</style>
<style>
.hide .el-upload--picture-card {
    display: none;
}

.upload_icon {
    width: 140px;
    height: 90px;
}
</style>
